<template>

  <div class="report-container">
    <!-- <title></title> -->
    <div class="report-header">
      <img class="img" src="../../assets/image/petshop.jpg" style="border: 0px;" />
    </div>
    <view>
      <text>地址：武汉市光谷步行街xxx宠物医院</text>
      <text></text>
    </view>

    <el-form :model="form" ref="form" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="电话:" prop="tel">
            <el-input v-model.number="form.tel" placeholder="请输入电话" oninput="if(value.length>11)value=value.slice(0,11)"
              onkeyup="this.value = this.value.replace(/[^\d]/g,'');"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="时间:" :span="24" prop="time">
            <div class="block">
              <!-- <span class="demonstration">默认</span> -->
              <el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="宠物名+年龄" prop="age">
            <el-input type="text" v-model="form.age" placeholder="哗哗+20天"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="品种:" :span="24" prop="pet_tyoe">
            <div>
              <el-input type="text" v-model="form.pet_tyoe" placeholder="狸花猫"></el-input>
            </div>
          </el-form-item>
        </el-col>




        <el-col :span="24">
          <el-form-item label="预约项目:" prop="remark">
            <el-input v-model="form.remark" placeholder="备注:"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">提交</el-button>
    </el-form>

  </div>
</template>

<script>
  import {
    getUnit,
    saveusers
  } from "@/api/user/user.js";
  import getPageTitle from "@/utils/get-page-title"
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        console.log('value', value);
        var phoneReg = /^1[3456789]\d{9}$/
        if (!phoneReg.test(value)) {
          return callback(new Error('请输入正确手机号'));
        }
      };
      return {
        checked: true,
        form: {
          name: '',
          tel: "",
          age: '',
          unit: '',
          pet_tyoe: "",
          remark: "",
          time: ""


        },
        rules: {
          name: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }, ],
          tel: [{
              required: true,
              message: '必填项',
              trigger: 'blur'
            },
            {
              validator: validatePass2,
              message: '手机号格式不正确',
              trigger: 'blur'
            }
          ],
          age: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }],
          unit: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }],
          pet_tyoe: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }],
          remark: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }],
          time: [{
            required: true,
            message: '必填项',
            trigger: 'blur'
          }],
          is_join: [{
            required: false,
            message: '',
            trigger: 'blur'
          }],

        },
        unit: [],
        editing: true,
        type: 2
      }
    },
    created() {

      console.log("type:", this.$route.query.id);
      if (this.$route.query.id != null) {
        this.type = this.$route.query.id
        if (this.type == 1) {
          document.title = getPageTitle("荆州市二价宫颈疫苗预约")
        }
        // this.getunit(this.type);
      } else {
        document.title = getPageTitle("宠物服务/疫苗预约")
        // this.getunit()
      }
    },
    methods: {
      // getunit(type =0) {
      //   var that = this
      //   let data = {
      //     field: "type",
      //     op: "=",
      //     value: type
      //   }
      //   getUnit(data).then(res => {
      //     console.log('getUnit:', res);
      //     that.unit = res
      //   })
      // },
      submitForm() {
        let that = this;
        var phoneReg = /^1[3456789]\d{9}$/
        if (!phoneReg.test(that.form.tel)) {
          that.$message({
            message: "手机号不正确",
            type: "error",
          });
          return false
        }
        if (that.form.name != '' && that.form.age != '' && that.form.remark != '') {
          let data = {
            name: that.form.name,
            age: that.form.age,
            // unit: that.form.unit,
            date:that.form.time,
            tel: that.form.tel,
            school: that.form.pet_tyoe,
            remark: that.form.remark,
            // is_home: that.form.is_home,
            // is_join: that.form.is_join,
            type: that.type
          }
          console.log('保存消息：', data);
          saveusers(data).then(res => {
            console.log('保存成功', res.id);
            if (res == 1) {
              that.$message({
                message: "恭喜您成功宠物服务，请尽快前往服务单位",
                type: "success",
              });
              that.resetForm("form")
            } else {
              that.$message({
                message: "手机号不能重复",
                type: "error",
              });
            }

          })

        } else {
          that.$message({
            message: "不能为空！",
            type: "error",
          });
          this.vloading = false;
        }
      },
      resetForm(form) {
        this.$refs[form].resetFields();
      },
    }
  }
</script>

<style scoped>
  .report-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    border: 1px solid #ddd;
  }

  .button-group {
    margin-top: 30px;
    text-align: right;
  }

  .report-header {
    display: flex;
    align-items: center;
  }

  .name,
  .age {
    font-size: 24px;
    font-weight: bold;
  }

  .img {
    width: 100%;
  }

  .edit-button {
    padding: 0;
    font-size: 16px;
  }

  .report-content {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }
</style>
